<template>
	<view class="IndexContent" :class="{'pof' : mineShow}" v-if="!loading">
		<!-- 顶部 -->
		<u-sticky bgColor="#2E2E2E" zIndex="100000" :offsetTop="0">
			<view class="index-content box-sizing dis-cen"
				:style="{ paddingTop: `${getSystemInfo.statusBarTop}rpx`, height: `${getSystemInfo.statusBarHeight}rpx` }">
				<view class="search-wai dis-ali">
					<view class="personal radius100 dis"
						@click="mineShow = mineShow ? false : true,mineShow && postDeliveryUserInfo()">
						<text class="iconfont icon-paotuiyuanwode color-f size-28"></text>
					</view>
					<view class="acceptings radius100" @click="onReceiving(infoData.closing*1)">
						<image class="state-icon" src="@/static/icon/yyz.png" v-if="infoData.closing*1" mode="">
						</image>
						<image class="state-icon" src="@/static/icon/ztyy.png" v-else mode=""></image>
						<view class="font-weight-400 colorbe size-28" :class="{'color-f':infoData.closing*1}">
							{{infoData.closing*1? '接单中' : '已暂停接单'}}
						</view>
						<image class="add-icon" src="@/static/icon/xia.png" mode=""></image>
					</view>
				</view>
				<!-- <view class="font-weight-600 color-f size-32 text-align">领火饭票</view> -->
			</view>
		</u-sticky>
		<u-sticky bgColor="#2E2E2E" zIndex="900" :offsetTop="getSystemInfo.statusBarHeight">
			<view class="seize por z-idnexseize"></view>
			<u-tabs :list="tabsList" :activeStyle="activePack" :inactiveStyle="inactivePack" lineColor="#ffffff"
				lineWidth="128rpx" lineHeight="6rpx" :current="current" @click="onSwitchTas"></u-tabs>
			<!-- 查看 -->
			<view class="tips dis" @click="onView" v-if="selectedList.length && current == 1">
				<text class="font-weight-400 size-28">温馨提示：你有{{selectedList.length}}个订单需提前取件</text>
				<view class="view font-weight-400 size-26 radius100 dis">查看</view>
			</view>
		</u-sticky>
		<!-- <button class="poflb" @click="onView">查看</button> -->
		<!-- 		<BodyMescroll ref="mescroll" :totalPage="totalPage" :endByPage="endByPage" v-slot:mescroll-body
			@up="getGetMerList()" @down="getGetMerList(1)"> -->
		<!-- 66=导航高度、50=顶部占位、76=查看部分、16=底部留白 -->
		<!-- 			<swiper @change="$event => current = $event.detail.source"
				:style="{ height:[tabsList[3].tyle].includes(tabsList[current].tyle) ? `50vh` :  `calc(100vh + ${(getSystemInfo.statusBarHeight + (selectedList.length ? 208 : 132) )}rpx)`}">
				<swiper-item v-for="(swItem,swIndex) in tabsList" :key="swIndex"> -->
		<scroll-view enable-flex scroll-with-animation :refresher-triggered="refresherTriggered"
			:scroll-into-view="`id${selectedList[selectedIndex]}`" scroll-y refresher-enabled
			:style="{ height: !list.length ? '50vh' : `calc(100vh + ${(getSystemInfo.statusBarHeight - altitudeAmount*2 )}rpx)`}"
			@refresherpulling="refresherTriggered=true" @refresherrefresh="postGetExpressOrderList()">
			<view class="types-of get-altitude dis-cen">
				<view class="dis-ali">
					<view class="types text-align dis" v-for="(item,index) in typesList" :key="index"
						@click="onTypeSection(item.type)">
						<text class="size-28"
							:class="params.orderType == item.type ? 'font-weight-600 color':'font-weight-400 color6'">{{item.name}}</text>
					</view>
				</view>
				<!-- <view class="por"> -->
				<!-- 				<picker mode='selector' :value="params.orderSort*1-1" :range="firstList" range-key="name"
					@change="onChange"> -->
				<!-- 			<view class="select-hover dis-ali por font-weight-400 size-26">
					<text class="color3">送达时间优先</text>
					<text class="margin-left-12 iconfont icon-down-1-copy"></text>
				</view> -->
				<!-- </picker> -->
			</view>
			<!--  v-if="![tabsList[3].tyle].includes(tabsList[current].tyle)" -->
			<view class="list" v-if="list.length">
				<view v-for="(item,index) in list" :key="index" :id="`id${item.id}`"
					class="box-sizing f-background radius12 margin-bottom-16 "
					:class="item.id == selectedList[selectedIndex] && current == 1?'border':'border-f'">
					<OrderModule :index="index" :item="item" v-slot:order-button @jumpPage="onJumpPage">
						<OperatingButton :phone="item.telephone" :item="item" :addIndex="infoData.closing"
							v-if="[3,4,5].includes(item.orderStatus)" @operate="onOperate($event,item)" />
					</OrderModule>
				</view>
			</view>
			<view v-else>
				<Default />
			</view>
		</scroll-view>
		<view class="poflb app-bottom-left width100">
			<view class="accepting dis-cen f-background" v-if="!infoData.closing"
				@click="onReceiving(infoData.closing)">
				<text class="font-weight-400 color0 size-28">当前你已暂停接单，若想接单请点击</text>
				<view class="start-orders background dis">
					<text class="color-f font-weight-600 size-24">开启接单</text>
				</view>
			</view>
			<view class="inset-bottom"></view>
		</view>

		<u-popup :show="phoShow" mode="bottom" round="32" @close="phoShow=false">
			<UploadSubmit :item="selectData" :deliveryStatus="selectData.orderStatus" @savePicture="onSavePicture" />
		</u-popup>
		<!-- 我的 -->
		<u-popup :show="mineShow" mode="left" round="32" @close="mineShow=false">
			<IndividualCenter :infoData="myInfoData" :statusBarHeight="getSystemInfo.statusBarHeight" />
		</u-popup>
		<!-- </BodyMescroll> -->
	</view>
</template>

<script>
	import UploadSubmit from '@/components/operating-button/upload-submit'
	import { GetExpressOrderList, PauseAcceptingOrders, UpdOrdersStatus, DeliveryUserInfo } from "@/api/index";
	import { getSystemInfo } from '@/utils/index';
	import { activePack, inactivePack } from '@/utils/style/tabs';
	import { settings, dataSize } from "@/utils/public"
	// import BodyMescroll from "@/components/body-mescroll/body-mescroll";
	import OrderModule from '@/components/order-module/order-module'
	import Default from '@/components/default/default'
	import OperatingButton from '@/components/operating-button/operating-button'
	import IndividualCenter from '@/components/individual-center/individual-center'
	// import { urlData } from '@/utils/enumeration/index'
	import { data } from "uview-ui/libs/mixin/mixin";
	const tis = {
		0: {
			name: "确认开始接单？",
			tis: "确认后可自主接单，系统可自动为你派单"
		},
		1: {
			name: "确认暂停接单？",
			tis: "暂停后不可自主接单，系统不会为你派单"
		}
	}
	export default {
		components: {
			// BodyMescroll,
			OrderModule,
			Default,
			OperatingButton,
			UploadSubmit,
			IndividualCenter
		},
		data() {
			return {
				mineShow: false,
				phoShow: false,
				refresherTriggered: false,
				selectData: {},
				// orderSortShow: false,
				settings,
				typesData: 1, // 1=送达时间优先 2=楼栋顺序优先
				current: 0, // 导航当前选中的索引
				activePack,
				inactivePack,
				loading: true,
				// 选中
				selectedIndex: -1,
				selectedList: [],
				// 获取动态高度
				altitude: [
					{ class: 'index-content' },
					{ class: 'seize' },
					{ class: 'tips' },
					// { class: 'types-of' },
					{ class: 'accepting' }
				],
				// urlData,
				altitudeAmount: 0,
				popInfo: {}, //确认信息部分 
				tabsList: [
					{ name: '待接单', names: '待接单', tyle: 3, numName: 'pendingOrders' },
					{ name: '待取货', names: '待取货', tyle: 4, numName: 'awaitingPickup' },
					{ name: '送货中', names: '送货中', tyle: 5, numName: 'deliveryInProgress' },
					{ name: '已送达', names: '已送达', tyle: 1, numName: 'completeCount' },
				],
				// typesIndex: 1,
				firstList: [
					{ name: '送达时间优先', tyle: 1 },
					{ name: '楼栋位置优先', tyle: 2 }
				],
				typesList: [
					{ name: '全部', names: '全部', type: 0, numName: 'allOrderCount' },
					{ name: '取快递', names: '取快递', type: 1, numName: 'deliveryCount' },
					{ name: '买商品', names: '买商品', type: 2, numName: 'goodsCount' }
				],
				// addIndex: 1, // 1=接单中 0=暂停接单
				getSystemInfo: getSystemInfo(), // 顶部自定义导航数据
				totalPage: 0,
				deliveryStatus: 0, // 状态
				// endByPage: false, // 是否隐藏下拉列表
				list: [],
				infoData: {},
				myInfoData: {},
				params: {
					orderType: 0, // 1=快递到家 2=商品购买
					orderStatus: 3, // 订单状态 0.创建订单 1.完成 2.待付款 3.待接单 4.待取货 5.配送中 6.已取消	
					orderSort: 1 // 排序类型 1.时间 2.栋数
				}
			}
		},
		onLoad() {
			// this.getGetMerList()
			this.postDeliveryUserInfo()
		},
		async onShow() {
			// console.log('231231', uni.getStorageSync('token'))
			if (!uni.getStorageSync('token')) {
				uni.reLaunch({
					url: '/packagePerson/logon/logon'
				});
				return
			}
			// if (uni.getStorageSync('userInfo')) {
			// 	console.log('12341654687',uni.getStorageSync('userInfo'))
			// 	uni.reLaunch({
			// 		url: urlData[uni.getStorageSync('userInfo').roleId]
			// 	});
			// 	return
			// }
			await this.postGetExpressOrderList(1)
		},
		methods: {
			// // 是否可以取件收件
			// async postUpdOrdersStatus(e) {

			// },
			onSavePicture() {
				this.phoShow = false
				this.postGetExpressOrderList()
			},
			onView() {
				let { selectedList, selectedIndex } = this
				if (selectedIndex < selectedList.length - 1) selectedIndex++
				else selectedIndex = 0
				this.selectedIndex = selectedIndex
			},
			async postDeliveryUserInfo() {
				const { code, data } = await DeliveryUserInfo()
				if (code == "200") {
					this.myInfoData = data
					uni.setStorageSync('userInfo', data)
				}
			},
			// 是否可以接单
			async postPauseAcceptingOrders() {
				let closing = this.infoData.closing * 1
				const { data, code } = await PauseAcceptingOrders({ isClosing: closing ? 1 : 0 })
				if (code == '200') {
					this.infoData.closing = closing ? 0 : 1
					uni.showToast({
						title: '操作成功',
						duration: 2000
					});
				}
			},
			onOperate({ item, type }) {
				this.selectData = item
				if ([2, 3].includes(type)) this.phoShow = true
				else this.postGetExpressOrderList()
			},
			mapData(list, data) {
				list.map(res => {
					res.name = `${res.names}(${data.orderCountInfo[res.numName] || 0})`
				})
				return list
			},
			// 订单列表
			async postGetExpressOrderList(page) {
				const { params, tabsList } = this
				const _this = this
				// params.currentPage = page || params.currentPage;
				const { data, code } = await GetExpressOrderList(params)
				if (code == "200") {
					this.tabsList = this.mapData(this.tabsList, data)
					this.typesList = this.mapData(this.typesList, data)
					// params.currentPage == 1 ? data.records : [...list, ...data.records];
					// data.pickOrderInfos[1]
					let listData = []
					data.pickOrderInfos.map((res => {
						// console.log()
						for (let i in res.pickSiteInfoList) {
							console.log()
							if (res.pickSiteInfoList[i].goend == 1) {
								listData.push(res.id)
								break
							}
						}
					}))
					this.list = data.pickOrderInfos
					console.log('list', listData)
					this.selectedList = listData
					this.infoData = data.orderCountInfo
					this.loading = false
					this.queryData()
					setTimeout(() => {
						_this.refresherTriggered = false
					}, 500)
					// this.totalPage = data.total
					// this.endByPage = true
					// this.onByPage(params.pageSize,data.total,true) // 隐藏下拉刷新和上拉加载的状态, 在联网获取数据成功后调用
				}
			},
			queryData() {
				// const _this = this
				let listDatas = []
				const query = wx.createSelectorQuery().in(this);
				this.altitude.map(res => {
					query.select(`.${res.class}`).boundingClientRect(rect => {
						listDatas.push(rect ? rect.height : 0)
						if (listDatas.length == this.altitude.length) {
							this.altitudeAmount = listDatas.reduce((a, b) => a + b).toFixed(2);
						}
					})
				})
				query.exec();
				// console.log(listDatas)
				// this.altitudeAmount = listDatas.reduce((a,b) => a+b);
			},
			// 弹窗提示 0=开启接单、1=关闭接单、2=确认接单、3=无法接单
			onReceiving(index) {
				const _this = this
				uni.showModal({
					title: tis[index].name,
					content: tis[index].tis,
					success: function(res) {
						if (res.confirm) {
							_this.postPauseAcceptingOrders()
							console.log('用户点击确定');
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					},
					fail: function(res) {
						console.log('提示失败', res)
					}
				});
			},
			// 点击切换
			onOrderSort(index) {
				this.params.orderSort = index
				this.orderSortShow = false
			},
			// 点击切换tas
			onSwitchTas(e) {
				console.log('e', e.tyle)
				this.current = e.index
				this.params.orderStatus = e.tyle
				this.selectedIndex = -1
				this.postGetExpressOrderList()
			},
			// 选择排序方法
			onChange(e) {
				console.log(e.detail.value)
				this.params.orderSort = e.detail.value * 1 + 1
				this.postGetExpressOrderList()
			},
			// 点击切换
			onTypeSection(index) {
				this.params.orderType = index
				this.postGetExpressOrderList()
			},
			onJumpPage(id) {
				console.log(id)
				uni.navigateTo({
					url: `/packageOrder/details/substitute?id=${id}`
				});
			}
		},
	}
</script>

<style lang="scss">
	.IndexContent {
		width: 100%;
		left: 0;
		// .padding {
		// 	padding: 100rpx;
		// }

		.padding-112 {
			padding-bottom: 112rpx;
		}

		// .scroll-Y {
		// 	width: 100%;
		// 	height: 100vh;
		// }

		.poflb {
			z-index: 10;
		}

		// 顶部
		.index-content {
			background: #2E2E2E;
			// display: grid;
			// grid-template-columns: 40% 20% 40%;
			z-index: 10000000;

			.personal {
				width: 56rpx;
				height: 56rpx;
				background: rgba(255, 255, 255, 0.13);
				margin-right: 24rpx;
			}

			.search-wai {
				padding-left: 24rpx;
				box-sizing: border-box;

				.acceptings {
					padding: 0 20rpx;
					height: 56rpx;
					display: grid;
					grid-template-columns: 20rpx 1fr 12rpx;
					background: rgba(255, 255, 255, 0.08);
					align-items: center;
					grid-column-gap: 8rpx;

					.state-icon {
						width: 20rpx;
						height: 20rpx;
					}

					.colorbe {
						color: #BEBEBE;
					}

					.add-icon {
						width: 12rpx;
						height: 8rpx;
					}
				}
			}
		}

		.seize {
			height: 30rpx;
		}

		.z-idnexseize {
			z-index: 900;
		}

		::v-deep.u-tabs__wrapper__nav__item {
			width: 25%;
			padding: 0 !important;
		}

		::v-deep.u-tabs__wrapper__nav__line {
			bottom: 0 !important;
			border-radius: 0 !important;
		}

		// 订单
		.list {
			padding: 0 16rpx 16rpx;

			.primary {
				padding: 0 8rpx;

				.primary-img {
					width: 24rpx;
					height: 24rpx;
					margin-right: 10rpx;
				}
			}
		}

		// 类型部分
		.types-of {
			padding: 20rpx 16rpx;

			.types {
				margin-right: 12rpx;
				min-width: 132rpx;
				height: 54rpx;
				padding: 0 16rpx;
				box-sizing: border-box;
				background: #FFFFFF;
				border-radius: 10rpx;
			}

			.gaibian {
				font-family: 'DIN Alternate';
			}

			.icon-down-1-copy {
				color: #999999;
				font-size: 22rpx;
				transition: all .5s;
				transform: rotate(0deg);
			}

			.convert {
				transform: rotate(180deg);
			}

			// .select {
			// 	bottom: -82px;
			// 	right: 0;
			// 	text-align: center;
			// 	padding: 24rpx 0;
			// 	border-radius: 10rpx;
			// 	display: grid;
			// 	grid-row-gap: 24rpx;
			// 	width: 110%;
			// 	z-index: 100;
			// 	box-shadow: 0 0 8rpx rgba(0, 0, 0, 0.05);
			// }
		}

		// 底部
		.accepting {
			padding: 22rpx 80rpx;
			box-sizing: border-box;

			.start-orders {
				width: 126rpx;
				height: 56rpx;
				border-radius: 8rpx;
			}
		}

		// 查看
		.tips {
			background: #FFF1DC;
			border: 1px solid #FFE4D3;
			color: #BE7629;
			height: 76rpx;

			.view {
				width: 100rpx;
				height: 44rpx;
				border: 1px solid rgba(220, 175, 128, 0.65);
				margin-left: 16rpx;
			}
		}
	}
</style>